<template>
	<view class='login'>
		<view>
			<u-navbar :autoBack="true" bgColor='rgba(245,245,245,0.39)'></u-navbar>
		</view>
		<view class='login-main'>
			<view class='login-img'>
				<image src="../../static/logo.png" mode=""></image>
				<text>手机号登录</text>
			</view>
			<view class="login-text">首次登录手机号将在验证后生成新账号</view>
			<view class='login-phone'>
				<input type="tel" placeholder="请输入手机号" v-model='phone'>
			</view>
			<view class='login-code'>
				<button 
					@click='code' 
					:disabled="isBtn"
					:class='isBtn?"active":""'
				>发送短信验证码</button>
			</view>
			<view class='login-msg'>
				<u-checkbox-group  @change='checkBtn'>
					<u-checkbox shape="circle"></u-checkbox>
					<view class='msg-text'>
						我已阅读并同意 <text>服务条款</text> 和 <text>隐私政策</text>
					</view>
				</u-checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	data () {
		return {
			phone:'',
			isBtn:true,
			check:0
		}
	},
	methods:{
		code(){
			if( this.check ){
				uni.navigateTo({
					url:`/pages/login/code?tel=${this.phone}`
				})
			}else{
				uni.showToast({
					title:'请查看服务条款和隐私协议',
					icon:'error'
				})
			}
		},
		checkBtn( e ){
			this.check = e.length;
		}
	},
	watch:{
		phone( newVal,oldVal ){
			let reg = /^1[23456789]\d{9}$/;
			this.isBtn = !reg.test( newVal );
		}
	}
}
</script>

<style>
.login{
	display: flex;
	align-items: center;
	width: 100vw;
	height: 100vh;
	background: rgba(245,245,245,0.39);
}
.login-main{
	flex:1;
	margin:0 58rpx;
}
.login-img{
	display: flex;
	align-items: center;
}
.login-img image{
	width: 83rpx;
	height: 83rpx;
}
.login-img text{
	padding-left: 22rpx;
	font-size: 56rpx;
	font-weight: bold;
	color: #343234;
}
.login-text{
	padding-top:45rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #343234;
	letter-spacing: 2rpx;
	opacity: 0.53;
}
.login-phone{
	padding-top:121rpx;
	padding-bottom:31rpx;
	border-bottom:2rpx solid #707070;
}
.login-code{
	padding-top:88rpx;
}
.login-code button{
	width: 100%;
	line-height: 100rpx;
	font-size: 33rpx;
	font-weight: bold;
	color: #FFFFFF;
	letter-spacing: 8rpx;
	opacity: 1;
	background-color:#337AFF;
}
.login-code button.active{
	background-color: #ccc;
}
.login-msg{
	padding-top:68rpx;
}
/deep/ .u-checkbox-group{
	justify-content: center;
	align-items: center;
}
.msg-text{
	font-size: 24rpx;
	font-weight: 400;
	color: #343234;
	letter-spacing: 2rpx;
}
.msg-text text{
	color:#0077FF;
}
</style>